import React, { memo, useEffect, useCallback, useState } from 'react'
import { Link } from "react-router-dom";

import style from "./style.css";

const GeciDetail = memo((props) => {
  const { song, lrcData, addSong, playSong, total, noOpenup, scrollComment } = props;
  const [isShowAll, setIsShowAll] = useState(false);
  console.log(song, lrcData, "GeciDetail render");

  const showComment = useCallback(() => {
    scrollComment()
  }, [])

  if (!song) {
    return <div>Loading...</div>;
  }

  return (
    <div className={style.gecidetail}>
      <div className={style.gecileft}>
        <img src={song.al.picUrl} alt="109951165531747155" />
        <div className={style.leftshare}>
          <img src={require("./svgs/music.png").default} alt="分享按钮" />
          <Link to="#">生成外联播放器</Link>
        </div>
      </div>
      <div className={style.geciright}>
        <div className={style.gctitle}>
          <img src={require("./svgs/biaoqian.svg").default} alt="单曲标签" />
          <div className={style.gcname}>
            <div>{song.name}</div>
            <div>{song.alia.length ? song.alia[0] : null}</div>
          </div>
        </div>
        <div className={style.gcauthor}>
          <div>
            歌手：<Link to="#">{song.ar[0].name}</Link>
          </div>
          <div>
            所属专辑：<Link to="#">{song.al.name}</Link>
          </div>
        </div>
        <div className={style.gcbtns}>
          <button className={style.bofang} onClick={() => playSong(song.id)}>
            <img src={require("./svgs/play.svg").default} alt="播放" />
            播放
          </button>
          <button
            className={style.bofang}
            onClick={() => addSong(song.id)}
          >
            添加歌单
          </button>
          <button className={style.bofang} onClick={() => noOpenup()}>
            <img src={require("./svgs/star.svg").default} alt="收藏" />
            收藏
          </button>
          <button className={style.bofang} onClick={() => noOpenup()}>
            <img src={require("./svgs/share.svg").default} alt="分享" />
            分享
          </button>
          <button className={style.bofang} onClick={() => noOpenup()}>
            <img src={require("./svgs/down.svg").default} alt="下载" />
            下载
          </button>
          <button className={style.bofang} onClick={() => showComment()}>
            <img src={require("./svgs/coment.svg").default} alt="评论" />(
            {total})
          </button>
        </div>
        <div
          className={style.gclrc}
          style={{ height: isShowAll ? "auto" : "150px", overflow: "hidden" }}
        >
          {lrcData
            ? lrcData.lrcNamesArr.map((item, index) => (
                <div className={style.gcitem} key={index}>
                  {item}
                </div>
              ))
            : null}
        </div>

        {lrcData && lrcData.lrcNamesArr.length > 4 ? (
          <div
            className={style.showall}
            onClick={(e) => setIsShowAll(!isShowAll)}
          >
            <Link to="#">{isShowAll ? "收起" : "展开"}</Link>
            <img src={require("./svgs/xiangxia.png").default} alt="下箭头" />
          </div>
        ) : null}

        <Link to="#" style={{ float: "right", right: "20px" }}>
          报错
        </Link>
      </div>
    </div>
  );
});

export default GeciDetail